<!-- start: BOOTSRAP NAV TREE -->
<div class="container-fluid container-fullw bg-white" ng-init="init()">
	<div class="row">
		<div class="col-md-3 col-sm-2">
			<a class="btn btn-primary" ng-click="refresh()"><span translate="modal.button.REFRESH">Refresh Data</span></a>
			<a class="btn btn-blue" ng-click="traversal()"><span translate="modal.button.TRAVERSAL">Traversal Data</span></a>
			<a class="btn btn-success" ng-click="ok()" ng-disabled="!selected_node"><span translate="modal.button.SELECT">Refresh Data</span></a>
			<a class="btn btn-grey" ng-click="cancel()"><span translate="modal.button.CLOSE">Refresh Data</span></a>
			<div class="row">
					<div class="panel panel-white">
						<div class="panel-header">
							<h5 translate="sidebar.nav.configuremanagerdb.plist.CLASSIC">CI Classic</h5>
						</div>
						<div class="panel-body">
							<div class="box-tree">
								<span ng-if="doing_async">...loading...</span>
								<abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith" icon-leaf="ti-file" icon-expand="ti-plus" icon-collapse="ti-minus"></abn-tree>
							</div>
						</div>
					</div>
					<div class="alert alert-warning">
						{{ output }}
					</div>
			</div>
		</div>
		<div class="col-md-9 col-sm-4">
			<div class="col-md-12 col-sm-12">
				<div class="col-md-3 col-sm-2">
					<multi-select-tree
    ng-model="cifilter_classic" data-input-model="select_treedata" data-output-model="cifilter_classics"
    theme="bootstrap" multi-select="false" data-default-label="配置分类"
    data-callback="onFilterCallback(item)"
    data-select-only-leafs="true"
    data-trans-label="label"
    data-switch-view="false"></multi-select-tree>
    			</div>
    			<div class="col-md-3 col-sm-2">
	    			<ui-select ng-model="cifilter_proptype" theme="bootstrap" 
					           ng-change="onPropTypeChange(cifilter_proptype)" reset-search-input="false">
					    <ui-select-match placeholder="属性分类">
					        {{$select.selected['title']}}
					    </ui-select-match>
					    <ui-select-choices repeat="option['form'] as option in propTypeOptions | filter: $select.search">
					    <div ng-bind-html="option['title'] | highlight: $select.search"></div> </ui-select-choices>
					</ui-select>
				</div>
				<div class="col-md-3 col-sm-2">
	    			<ui-select ng-model="cifilter_prop" theme="bootstrap" 
					           ng-change="onPropChange(cifilter_prop)" reset-search-input="false">
					    <ui-select-match placeholder="搜索字段">
					        {{$select.selected['templateOptions']['label']}}
					    </ui-select-match>
					    <ui-select-choices repeat="propOption in propOptions | filter: $select.search">
					    <div ng-bind-html="propOption['templateOptions']['label'] | highlight: $select.search"></div> </ui-select-choices>
					</ui-select>
				</div>
				<div class="input-group col-md-3 col-sm-2">
					<input class="form-control" ng-model="cisearchKey">
					<span class="input-group-btn">
				        <button class="btn btn-default"
				                ng-click="searchCI(cisearchKey, cifilter_prop, cifilter_classic)"
				                type="button"><span ng-translate="sidebar.search.PLACEHOLDER"></span><i class="fa fa-search-plus"></i></button>
				    </span>
				</div>
			</div>
			<div class="col-md-12 col-sm-12" id="cmdbSVG"></div>
		</div>
	</div>
</div>
<!--position: inspector.position, top: inspector.top, left: inspector.left,width: inspector.width, z-index: inspector.zindex-->
<div class="inspector fade ui-draggable in" ng-class="{position: inspector.position, top: inspector.top, left: inspector.left, width: inspector.width}" ng-if="inspector">
	<div class="header"><span class="preview" style="background-color: rgb(223, 225, 227);">{{selected_node.name}}</span><span class="muted">[{{selected_node.uuid}}]</span><a ng-click="toggleInspector()" class="close icon-remove"></a></div>
	<div class="tabbable ng-isolate-scope" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
			<ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical}" tabset-titles="tabsAbove">
			<li ng-class="{active: active, disabled: disabled}" class="ng-scope ng-isolate-scope active">
					<tab-heading class="ng-scope"><i class="icon-info-sign"></i><span class="name">属性</span></tab-heading>
			</li>
		</ul>
			<div class="tab-content">
			<div class="tab-pane ng-scope active" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">            
	            <ul class="sections unstyled tight scrollable ng-scope">
	              <li ng-show="item.propertyList.length == 0" class="empty ng-hide">No properties</li>
	              <!-- ngRepeat: property in item.propertyList --><li ng-repeat="property in item.propertyList" class="pair ng-scope">
	                <div class="key ng-binding">lastupdatetime</div>
	                <div class="value ng-binding">1458025040436</div>
	              </li><!-- end ngRepeat: property in item.propertyList -->
	            </ul>
				</div><!-- end ngRepeat: tab in tabs -->
		</div>
	</div>
</div>